<layout name='Common/layout'/>

<link rel="stylesheet" href="__PUBLIC__/Home/style/goods.css" type="text/css">
<link rel="stylesheet" href="__PUBLIC__/Home/style/common.css" type="text/css">
<link href="__PUBLIC__/jquery-ui-1.9.2.custom/css/blitzer/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<link rel="stylesheet" href="__PUBLIC__/Home/style/jqzoom.css" type="text/css">

<script type="text/javascript" src="__PUBLIC__/Home/js/goods.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/js/jqzoom-core.js"></script>
<script type="text/javascript" src="__PUBLIC__/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>

<style type="text/css">
    .reply_container{margin-top:25px;}
    .reply_container li{min-height:70px;margin:3px;background: #DAF1DA;padding:5px;}
    .reply_container li p{margin-top:10px;}
    .reply_container img{float:right;}
</style>

<div id="login_dialog" class="none" title="登录表单">
    <form id="login_form">
        <ul>
            <li>
                <label for="">用户名：</label>
                <input type="text" class="txt" name="username"/>
            </li><br/>
            <li>
                <label for="">密&nbsp;码：</label>
                 &nbsp;&nbsp;<input type="password" class="txt" name="password"/>
            </li><br/>
            <li class="checkcode">
                <label for="">验证码：</label>
                <input type="text" name="chkcode"/><br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo U('Member/chkcode'); ?>" style="cursor:pointer;" onclick="this.src='<?php echo U('Member/chkcode'); ?>#'+Math.random();"width="160" />
            </li>
        </ul>

    </form>

</div>

<!-- jqzoom 效果 -->
<script type="text/javascript">
    $(function(){
        $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:false,
            title:false,
            zoomWidth:400,
            zoomHeight:400
        });
    })
</script>

<include file="Common/nav"/>

<!-- 商品页面主体 start -->
<div class="main w1210 mt10 bc">
    <!-- 面包屑导航 start -->
    <div class="breadcrumb">
        <h2>当前位置：
            <a href="{:U('Index/index')}">首页</a> >
            <?php
                $count = count($catPath);
                for($i=$count-1;$i>=0;$i--): ?>
                    <a href=""><?php echo $catPath[$i]['cat_name']; ?></a>
                <?php endfor; ?>
            <?php echo $info['goods_name']; ?>
        </h2>
    </div>
    <!-- 面包屑导航 end -->

    <!-- 主体页面左侧内容 start -->
    <div class="goods_left fl">
        <!-- 相关分类 start -->
        <div class="related_cat leftbar mt10">
            <h2><strong>相关分类</strong></h2>
            <div class="leftbar_wrap">
                <ul>
                    <li><a href="">T恤</a></li>
                    <li><a href="">衬衫</a></li>
                    <li><a href="">牛仔裤</a></li>
                </ul>
            </div>
        </div>
        <!-- 相关分类 end -->

        <!-- 相关品牌 start -->
        <!--<div class="related_cat	leftbar mt10">
            <h2><strong>同类品牌</strong></h2>
            <div class="leftbar_wrap">
                <ul>
                    <li><a href="">D-Link</a></li>
                    <li><a href="">戴尔</a></li>
                    <li><a href="">惠普</a></li>
                    <li><a href="">苹果</a></li>
                    <li><a href="">华硕</a></li>
                    <li><a href="">宏基</a></li>
                    <li><a href="">神舟</a></li>
                </ul>
            </div>
        </div>-->
        <!-- 相关品牌 end -->

        <!-- 热销排行 start -->
        <div class="hotgoods leftbar mt10">
            <h2><strong>热销排行榜</strong></h2>
            <div class="leftbar_wrap">
                <ul>
                    <?php foreach($goods2 as $k=>$v):?>
                    <li>
                        <dl style="text-align: center">
                            <dt><a href="<?php echo U('goods?id='.$v['id']); ?>"><?php showImage($v['mid_logo']);?></a></dt>
                            <dd><a href="<?php echo U('goods?id='.$v['id']); ?>"><?php echo $v['goods_name']; ?></a></dd>
                            <dd><span>售价：</span><strong> ￥<?php echo $v['shop_price']; ?>元</strong></dd>
                        </dl>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
        <!-- 热销排行 end -->

        <!-- 最近浏览 start -->
        <div class="viewd leftbar mt10">
            <h2><a href="">清空</a><strong>最近浏览过的商品</strong></h2>
            <div class="leftbar_wrap" id="display_history"></div>
        </div>
        <!-- 最近浏览 end -->

    </div>
    <!-- 主体页面左侧内容 end -->

    <!-- 商品信息内容 start -->
    <div class="goods_content fl mt10 ml10">
        <!-- 商品概要信息 start -->
        <div class="summary">
            <h3><strong><?php echo $info['goods_name']; ?></strong></h3>

            <!-- 图片预览区域 start -->
            <div class="preview fl">
                <div class="midpic">
                    <a href="<?php echo $viewPath.$info['mbig_logo']; ?>" class="jqzoom" rel="gal1">   <!-- 第一幅图片的大图 class 和 rel属性不能更改 -->
                        <?php showImage($info['big_logo']); ?>               <!-- 第一幅图片的中图 -->
                    </a>
                </div>

                <!--使用说明：此处的预览图效果有三种类型的图片，大图，中图，和小图，取得图片之后，分配到模板的时候，把第一幅图片分配到 上面的midpic 中，其中大图分配到 a 标签的href属性，中图分配到 img 的src上。 下面的smallpic 则表示小图区域，格式固定，在 a 标签的 rel属性中，分别指定了中图（smallimage）和大图（largeimage），img标签则显示小图，按此格式循环生成即可，但在第一个li上，要加上cur类，同时在第一个li 的a标签中，添加类 zoomThumbActive  -->

                <div class="smallpic">
                    <a href="javascript:;" id="backward" class="off"></a>
                    <a href="javascript:;" id="forward" class="on"></a>
                    <div class="smallpic_wrap">
                        <ul>
                            <li class="cur">
                                <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '<?php echo $viewPath.$info['big_logo']; ?>',largeimage:
                                 '<?php echo $viewPath.$info['mbig_logo']; ?>'}"><?php showImage($info['sm_logo']); ?></a>
                            </li>
                            <!--循环相册图片-->
                            <?php foreach($gpData as $k => $v): ?>
                            <li>
                                <a href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '<?php echo $viewPath.$v['mid_pic']; ?>',largeimage:
                                '<?php echo $viewPath.$v['big_pic']; ?>'}"><?php showImage($v['sm_pic']); ?></a>
                            </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- 图片预览区域 end -->

            <!-- 商品基本信息区域 start -->
            <div class="goodsinfo fl ml10">
                <ul>
                    <li><span>商品编号： </span><?php echo $info['id']; ?></li>
                    <li class="market_price"><span>定价：</span><em>￥<?php echo $info['market_price']; ?></em></li>
                    <li class="shop_price"><span>本店价：</span> <strong>￥<?php echo $info['shop_price']; ?></strong></li>
                    <li class="shop_price"><p style="text-indent: 22px;font-size: 12px;">会员价：</p>
                        <ul>
                            <?php foreach($mpData as $k => $v): ?>
                            <li class="shop_price" style="margin-left:45px;">
                                <span><?php echo $v['level_name']; ?></span>
                                <strong>￥<?php echo $v['price']; ?></strong>
                            </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>

                    <li><span>上架时间：</span><?php echo $info['addtime'];?></li>
                    <li class="star"><span>商品评分：</span> <strong></strong><a href="">(已有21人评价)</a></li> <!-- 此处的星级切换css即可 默认为5星 star4 表示4星 star3 表示3星 star2表示2星 star1表示1星 -->
                </ul>
                <!--加入购物车的表单-->
                <form action="{:U('Cart/add')}" method="post" class="choose">
                    <input type="hidden" name="goods_id" value="<?php echo $info['id']; ?>"/>
                    <ul>
                        <?php foreach($mulAttr as $k => $v): ?>
                        <li class="product">
                            <dl>
                                <dt><?php echo $k; ?>:</dt>
                                <dd>
                                    <?php foreach($v as $k1 => $v1): ?>
                                    <a <?php if($k1==0) echo 'class="selected"'; ?> href="javascript:;">
                                        <?php echo $v1['attr_value']; ?>
                                    <input  type="radio" name="goods_attr_id[<?php echo $v1['attr_id']; ?>]"
                                    value="<?php echo $v1['id']; ?>" <?php if($k1==0) echo 'checked="checked"'; ?>/>
                                    </a>
                                    <?php endforeach; ?>
                                </dd>
                            </dl>
                        </li>
                        <?php endforeach; ?>
                        <li>
                            <dl>
                                <dt>购买数量：</dt>
                                <dd>
                                    <a href="javascript:;" id="reduce_num"></a>
                                    <input type="text" name="goods_number" value="1" class="amount"/>
                                    <a href="javascript:;" id="add_num"></a>
                                </dd>
                            </dl>
                        </li>

                        <li>
                            <dl>
                                <dt>&nbsp;</dt>
                                <dd>
                                    <input type="submit" value="" class="add_btn" />
                                </dd>
                            </dl>
                        </li>

                    </ul>
                </form>
            </div>
            <!-- 商品基本信息区域 end -->
        </div>
        <!-- 商品概要信息 end -->

        <div style="clear:both;"></div>

        <!-- 商品详情 start -->
        <div class="detail">
            <div class="detail_hd">
                <ul>
                    <li ><span>商品介绍</span></li>
                    <li class="first on"><span>商品评价</span></li>
                    <li><span>售后保障</span></li>
                </ul>
            </div>
            <div class="detail_bd">
                <!-- 商品介绍 start -->
                <div class="introduce detail_div none">
                    <div class="attr mt15">
                        <ul>
                            <?php foreach($uniAttr as $k => $v) : ?>
                            <li ><span><?php echo $v['attr_name']; ?></span><?php echo $v['attr_value']; ?></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>

                    <div class="desc mt10" style="text-align:left">
                        <?php echo $info['goods_desc'];  ?>
                    </div>
                </div>
                <!-- 商品介绍 end -->

                <!-- 商品评论 start -->
                <div class="comment detail_div mt10">
                    <div class="comment_summary">
                        <div class="rate fl">
                            <strong><em class="hao"></em>%</strong> <br />
                            <span>好评度</span>
                        </div>
                        <div class="percent fl">
                            <dl>
                                <dt>好评（<span class="hao"></span>%）</dt>
                                <dd><div id="hao_width"></div></dd>
                            </dl>
                            <dl>
                                <dt>中评（<span class="zhong"></span>%）</dt>
                                <dd><div id="zhong_width"></div></dd>
                            </dl>
                            <dl>
                                <dt>差评（<span class="cha"></span>%）</dt>
                                <dd><div id="cha_width"></div></dd>
                            </dl>
                        </div>
                        <div class="buyer fl">
                            <dl>
                                <dt>买家印象：</dt>
                            </dl>
                        </div>
                    </div>
                    <div id="comment_container">

                    </div>

                    <!--  评论表单 start-->
                    <div class="comment_form mt20">
                        <form id="comment_form">
                            <input type="hidden" name="goods_id" value="<?php echo $info['id']; ?>"/>
                            <ul>
                                <li>
                                    <label for=""> 评分：</label>
                                    <input type="radio" name="star" value="5" checked="checked"/> <strong class="star star5"></strong>
                                    <input type="radio" name="star" value="4"/> <strong class="star star4"></strong>
                                    <input type="radio" name="star" value="3"/> <strong class="star star3"></strong>
                                    <input type="radio" name="star" value="2"/> <strong class="star star2"></strong>
                                    <input type="radio" name="star" value="1"/> <strong class="star star1"></strong>
                                </li>

                                <li>
                                    <label for="">评价内容：</label>
                                    <textarea name="content" id="" cols="" rows=""></textarea>
                                </li>
                                <li id="mjyx">
                                    <label for="">买家印象：</label>
                                    <input type="text" name="yx_name" size="60"/> 多个印象用,号隔开
                                </li>
                                <li>
                                    <label for="">&nbsp;</label>
                                    <input type="button" value="提交评论"  class="comment_btn"/>
                                </li>
                            </ul>
                        </form>
                    </div>
                    <!--  评论表单 end-->

                </div>
                <!-- 商品评论 end -->

                <!-- 售后保障 start -->
                <div class="after_sale mt15 none detail_div">
                    <div>
                        <p>本产品全国联保，享受三包服务，质保期为：一年质保 <br />如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！</p>
                        <p>售后服务电话：800-898-9006 <br />品牌官方网站：http://www.lenovo.com.cn/</p>

                    </div>

                    <div>
                        <h3>服务承诺：</h3>
                        <p>本商城向您保证所售商品均为正品行货，京东自营商品自带机打发票，与商品一起寄送。凭质保证书及京东商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由本商城联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。本商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！</p>

                        <p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</p>

                    </div>

                    <div>
                        <h3>权利声明：</h3>
                        <p>本商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东商城重要的经营资源，未经许可，禁止非法转载使用。</p>
                        <p>注：本站商品信息均来自于厂商，其真实性、准确性和合法性由信息拥有者（厂商）负责。本站不提供任何保证，并不承担任何法律责任。</p>

                    </div>
                </div>
                <!-- 售后保障 end -->

            </div>
        </div>
        <!-- 商品详情 end -->


    </div>
    <!-- 商品信息内容 end -->


</div>
<!-- 商品页面主体 end -->


<div style="clear:both;"></div>

<include file="Common/help"/>


<script>

    <?php $config = C('IMAGE_CONFIG'); ?>
    var viewPath = '<?php echo $config['viewPath']; ?>';
    //记录浏览历史
    $.ajax({
        type:"GET",
        url : "<?php echo U('Index/displayHistory?id='.$info['id']); ?>",
        dataType : "json",
        success : function (data)
        {
            var html = "";
            $(data).each(function(k,v)
            {
                html += '<dl><dt><a href="<?php echo U('goods','',false); ?>/id/'+v.id+'"><img src="'+viewPath+v.mid_logo+'"/></a></dt><dd>' + '<a href="<?php echo U('goods','',false); ?>/id/'+v.id+'">'+v.goods_name+'</a></dd></dl>'
            });
            $("#display_history").html(html);
        }
    });

    //ajax发表评论
    $(".comment_btn").click(function ()
    {
        //先接受表单数据，并拼接成这样格式的字符串：name=tom&age=18
        var form = $("#comment_form");
        var formData = form.serialize();
        $.ajax({
            type: "POST",
            url : "<?php echo U('Comment/add'); ?>",
            data : formData, //表单要提交的数据
            dataType : "json", //服务器返回的格式
            success : function (data)
            {
                if(data.status==0)
                {
                    //未登录就显示弹出窗口
                    if(data.info == '登录后才能评论！')
                    {
                        $("#login_dialog").dialog("open");
                    } else
                    {
                        alert(data.info);
                    }
                } else {
                    //清空表单
                    form.trigger("reset");
                    //用新发表的评论数据拼出一个显示的HTML字符串
                    var html = '<div class="comment_items mt10 none"><div class="user_pic"><dl><dt><a href=""><img src="'+data.info.face+'" alt=""/>'
                            +'</a></dt><dd><a href="">'+data.info.username+'</a></dd></dl></div><div class="item"><div class="title"><span>'
                            +data.info.addtime+'</span><strong class="star star'+data.info.star+'"></strong></div><div class="comment_content">'
                            +data.info.content+'</div><div class="btns"><a href="javascript:void(0);" onclick="do_reply(this,'+data.info.id+');"' +
                            'class="reply">回复(0)</a><a href="" class="useful">有用(0)</a></div><div class="reply_form"></div>' +
                            '<ul class="reply_container"></ul></div><div class="cornor"></div></div>';
                    //把整个评论的字符串转化成jq的对象
                    html = $(html);
                    //把拼好的评论放到页面中
                    $("#comment_container").prepend(html);
                    //让导航条直接滚到第一个评论处
                    $("body").animate({
                        "scrollTop" : "750px"
                    },1000,function () {
                        html.fadeIn(2000);
                    });
                }
            }
        });
    });

    //配置对话框
    $("#login_dialog").dialog({
        resizable : false,
        position  : {at:"center"},
        modal     : true,
        autoOpen  : false,
        width     : 400,
        buttons   : [
            {
                text: "登录",
                click: function () {
                    //ajax提交表单
                    $.ajax({
                        type: "POST",
                        url : "<?php echo U('Member/login'); ?>",
                        data : $("#login_form").serialize(),
                        dataType : "json",
                        success : function (data) {
                            if(data.status == 1)
                            {
                                is_login = 1;
                                $("#login_dialog").dialog("close");
                                window.location.reload();
                            } else
                            {
                                alert(data.info);
                            }
                        }
                    });
                }
            },
            {
                text : "取消",
                click : function () {
                    $(this).dialog("close");
                }
            }
        ]
    });

    /**评论缓存**/
    var cache = [];
    //获取某一页缓存
    function getCache(page)
    {
        for(var i=0;i<cache.length;i++)
        {
            if(cache[i][0] == page)
            {
                return cache[i];
            }
        }
        return false;
        
    }

    /**ajax获取某一页的评论**/
    function ajaxGetPl(page)
    {
        var c =getCache(page);
        if(c !== false)
        {
            $("#comment_container").html(c[1]);
            $(".page").html(c[2]);
            return;
        }
        $.ajax({
            type : "GET",
            url  : "<?php echo U('Comment/ajaxGetPl?goods_id='.$info['id'],'',false); ?>/p/"+page,
            dataType : "json",
            success  : function (data)
            {
                is_login = data.memberId; //把当前会员ID传给全局变量
                //如果是第一页的评论那么服务器会返回好评率印象
                if(page == 1)
                {
                    //放好评率
                    $(".hao").html(data.hao);
                    $("#hao_width").css("width",data.hao+"px");

                    $(".zhong").html(data.zhong);
                    $("#zhong_width").css("width",data.zhong+"px");

                    $(".cha").html(data.cha);
                    $("#cha_width").css("width",data.cha+"px");

                    //循环印象是数据，1.拼成复选框 2.拼成DD标签
                    var yxhtml = "";
                    var yxChkHtml = ""; //复选框
                    $(data.yxData).each(function (k,v) {
                        yxhtml += '<dd><span>'+v.yx_name+'</span><em>('+v.yx_count+')</em></dd>';
                        yxChkHtml += '<input type="checkbox" name="yx_id[]" value="'+v.id+'"/>'+v.yx_name+'';
                    });
                    $(".buyer.fl").append(yxhtml);

                    //把复选框放到买家印象前面
                    if(yxChkHtml != "")
                    {
                        $("#mjyx").before('<li><label for="">选择印象：</label>'+yxChkHtml+'</li>');
                    }
                }

                //循环每个评论拼出HTML字符串放到页面中
                var html = "";
                //循环每个评论
                $(data.data).each(function (k,v) {
                    //拼每个评论的回复
                    var hfhtml = "";
                    $(v.reply).each(function (k1,v1) {
                        hfhtml += '<li><img src="'+v1.face+'" width="50"/>'+v1.username+'【'+v1.addtime+'】回复：<p>'+v1.content+'</p></li>'
                    });
                    html += '<div class="comment_items mt10 "><div class="user_pic"><dl><dt><a href=""><img src="'+v.face+'" alt=""/>' +
                            '</a></dt><dd><a href="">'+v.username+'</a></dd></dl></div><div class="item">' +
                            '<div class="title"><span>'+v.addtime+'</span><strong class="star star'+v.star+'"></strong></div>' +
                            '<div class="comment_content">'+v.content+'</div>' +
                            '<div class="btns"><a href="javascript:void(0);" onclick="do_reply(this,'+v.id+');" class="reply">回复('+v.reply_count+')</a><a href="" class="useful">有用('+v.click_count+')</a></div>' +
                            '<div class="reply_form"></div><ul class="reply_container">'+hfhtml+'</ul></div>' +
                            '<div class="cornor"></div></div>';
                });

                //放到页面中覆盖数据
                $("#comment_container").html(html);

                //根据总页数拼出翻页字符串
                var pageString = "";
                for(var i=1;i<=data.pageCount;i++)
                {
                    if(page == i)
                    {
                        var cls = 'class="cur"';
                    } else {
                        var cls = '';
                    }
                    pageString += '<a '+cls+' onclick="ajaxGetPl('+i+');" href="javascript:void(0); ">'+i+'</a>';
                }

                //翻页字符串放到页面
                $('.page').html(pageString);

                //放到缓存中
               cache.push([page,html,pageString]);
            }
        });
    }
    //取第一页评论
    ajaxGetPl(1);

    var is_login = 0; //是否登录

    /**回复**/
    function do_reply(btn,commentId) {
        //先选中按钮所在的div
        var div = $(btn).parent().next("div");

        /**在回复按钮的下面构造一个回复的表单**/
        var replyForm = '<br/><hr style="clear:both;margin-top:15px;"/><form ><input type="hidden" name="comment_id" value="'+commentId+'"/>' +
                '<textarea name="content" style="width:100%;" rows="6"></textarea><br/><br/>' +
                '<input type="button" onclick="post_reply(this);" value="回复" />' +
                '<input onclick="close_reply(this);" type="button" value="取消">' +
                '</form>';
        //放到按钮后面
        div.html(replyForm);

        //判断有没有登录
        if(is_login <= '0'){
            $("#login_dialog").dialog("open");
        }
    }

    //ajax提交回复
    function post_reply(btn) {
        var formData = $(btn).parent().serialize();
        $.ajax({
            type : "POST",
            url  : "<?php echo U('Comment/reply'); ?>",
            data : formData,
            dataType : "json",
            success : function (data) {
                if(data.status == 1){
                    //把回复的内容直接显示在页面中
                    var html = '<li><img src="'+data.info.face+'" width="50"/>'+data.info.username+'【'+data.info.addtime+'】回复：<p>' + data.info.content+'</p></li>';
                    $(btn).parent().parent().next('ul').append(html);
                    //去掉表单
                    $(btn).parent().parent().html('');
                } else {
                    //未登录就显示出弹出窗口
                    if(data.info == "登录后才能回复！"){
                        $("#login_dialog").dialog("open");
                    } else {
                        alert(data.info);
                    }
                }
            }
        });
    }



    //关闭回复按钮
    function close_reply(btn) {
        var div = $(btn).parent().parent();
        div.html('');
    }


</script>

